<template>
  <div class="login-container">
    <!-- 背景装饰元素 -->
    <div class="decoration circle dec-1"></div>
    <div class="decoration rect dec-2"></div>
    <div class="decoration circle dec-3"></div>
    <div class="decoration rect dec-4"></div>

    <div class="login-card">
      <div class="login-left">
        <h1>云校园管理平台</h1>
        <p>一体化校园资源管理解决方案，助力学生云上社交</p>

        <div class="features">
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-users"></i>
            </div>
            <div class="feature-text">共享整合教学资源</div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <div class="feature-text">开放社交 更近的距离</div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="feature-text">多重安全保障，数据加密存储</div>
          </div>
        </div>
      </div>

      <div class="login-right">
        <div class="login-header">
          <h2>欢迎登录</h2>
          <p>请输入您的账号密码以继续访问系统</p>
        </div>

        <el-form
            label-width="80px"
            :model="loginForm"
            :rules="rules"
            ref="loginFormRef"
            class="login-form"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
                prefix-icon="User"
                v-model="loginForm.userName"
                placeholder="请输入用户名"
                size="large"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
                prefix-icon="Lock"
                type="password"
                placeholder="请输入密码"
                v-model="loginForm.password"
                show-password
                size="large"
            />
          </el-form-item>

          <el-form-item label="验证码" prop="captchaValue">
            <div class="flex-hcenter">
              <el-input
                  v-model="loginForm.captchaValue"
                  placeholder="请输入验证码"
                  prefix-icon="Key"
                  size="large"
              ></el-input>
              <div class="captcha-image" @click="getCapechaImageUrl">
                <el-image
                    :src="captchaImageUrl"
                    style="width: 100%; height: 100%"
                >
                  <template #error>
                    <div class="flex-hcenter"><el-text>点击刷新</el-text></div>
                  </template>
                </el-image>
              </div>
            </div>
          </el-form-item>

          <el-button
              class="login-btn"
              type="primary"
              @click="loginSubmit(loginFormRef)"
              :loading="loading"
              size="large"
          >登录</el-button>
        </el-form>

        <div class="footer-links">
          <a href="#"><i class="fas fa-key"></i> 忘记密码</a>
          <a href="#"><i class="fas fa-question-circle"></i> 帮助中心</a>
          <a href="#"><i class="fas fa-mobile-alt"></i> 手机端下载</a>
        </div>

        <div class="copyright">
          © 2025 云校园管理系统 | 校园资源整合解决方案
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/stores/user";
import type { LoginFrom } from "@/api/system/user/type";
import { reqCaptcha } from "@/api/system/user";
import { useRouter } from "vue-router";

const loginForm = reactive<LoginFrom>({
  userName: "admin",
  password: "123",
  captchaKey: "",
  captchaValue: "",
});

const loading = ref(false);
const loginFormRef = ref<FormInstance>();
const captchaImageUrl = ref("");
const router = useRouter();
const userStore = useUserStore();

/**
 * 登录
 */
const loginSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  try {
    await formEl.validate(async (valid) => {
      if (valid) {
        loading.value = true;
        await userStore.userLogin(loginForm);
        router.push("/");
      }
    });
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

/**
 * 获取验证码图片
 */
const getCapechaImageUrl = async () => {
  try {
    loading.value = true;
    const res = await reqCaptcha();
    captchaImageUrl.value = res.data.captchaImage;
    loginForm.captchaKey = res.data.captchaKey;
    loginForm.captchaValue = "";
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

const rules = reactive<FormRules<LoginFrom>>({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  captchaValue: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

onMounted(() => {
  getCapechaImageUrl();
});
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 更新为淡蓝色渐变背景 */
  background: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.15) 0%, transparent 20%);
    z-index: 0;
  }
}

.login-card {
  display: flex;
  width: 100%;
  max-width: 1000px;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(24, 144, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  z-index: 2;
  border: 1px solid rgba(179, 224, 255, 0.5);
}

.login-left {
  flex: 1;
  /* 更新左侧面板渐变 */
  background: linear-gradient(to bottom right, #4da1ff, #5b86e5);
  color: white;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
  }

  h1 {
    font-size: 36px;
    margin-bottom: 10px;
    font-weight: 700;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
    position: relative;
    z-index: 2;
    opacity: 0.9;
  }
}

.features {
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);

  &:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.feature-icon {
  background: rgba(255, 255, 255, 0.25);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  font-size: 20px;
  color: #e6f7ff;
}

.feature-text {
  font-size: 16px;
  font-weight: 500;
  color: white;
}

.login-right {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;

  h2 {
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 700;
    /* 更新标题渐变 */
    background: linear-gradient(to right, #36d1dc, #5b86e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  p {
    color: #5a8cae;
    font-size: 16px;
  }
}

.login-form {
  :deep(.el-form-item) {
    margin-bottom: 28px;
  }

  :deep(.el-form-item__label) {
    color: #5a8cae;
    font-weight: 500;
  }

  :deep(.el-input) {
    height: 50px;
    border-radius: 12px;
    font-size: 16px;

    .el-input__wrapper {
      border-radius: 12px;
      padding: 0 20px;
      box-shadow: 0 4px 12px rgba(54, 209, 220, 0.15) !important;
      border: 1px solid #d1e9ff;
      transition: all 0.3s;
      background: #f8fcff;

      &:hover, &:focus-within {
        box-shadow: 0 4px 16px rgba(54, 209, 220, 0.25) !important;
        border-color: #5b86e5;
      }
    }
  }
}

.flex-hcenter {
  display: flex;
  align-items: center;
  gap: 15px;
}

.captcha-image {
  width: 150px;
  height: 50px;
  border-radius: 12px;
  border: 1px solid #d1e9ff;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fcff;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(54, 209, 220, 0.2);
  }
}

.login-btn {
  width: 100%;
  height: 55px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  /* 更新按钮渐变 */
  background: linear-gradient(to right, #36d1dc, #5b86e5);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 6px 20px rgba(54, 209, 220, 0.3);
  margin-top: 20px;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20px;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(25deg);
    transition: all 0.6s;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(54, 209, 220, 0.4);

    &::after {
      left: 120%;
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  font-size: 14px;

  a {
    color: #5b86e5;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;

    &:hover {
      color: #36d1dc;
      text-decoration: underline;
    }
  }
}

.copyright {
  text-align: center;
  margin-top: 35px;
  color: #7a9db8;
  font-size: 14px;
}

.decoration {
  position: absolute;
  z-index: 1;
}

.decoration.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 更新装饰元素颜色 */
  background: linear-gradient(to right, #36d1dc, #5b86e5);
  opacity: 0.12;
  animation: float 8s infinite ease-in-out;
}

.decoration.rect {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  /* 更新装饰元素颜色 */
  background: linear-gradient(to right, #36d1dc, #5b86e5);
  opacity: 0.12;
  transform: rotate(45deg);
  animation: float 10s infinite ease-in-out;
}

.dec-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.dec-2 {
  bottom: 15%;
  right: 5%;
  animation-delay: 1s;
}

.dec-3 {
  top: 20%;
  right: 10%;
  animation-delay: 2s;
}

.dec-4 {
  bottom: 10%;
  left: 10%;
  animation-delay: 3s;
}

/* 动画效果 */
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@media (max-width: 900px) {
  .login-card {
    flex-direction: column;
    height: auto;
    max-width: 500px;
  }

  .login-left {
    padding: 30px 20px;
  }

  .login-right {
    padding: 30px 20px;
  }

  .login-header h2 {
    font-size: 28px;
  }

  .feature-item {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 15px;
  }

  .login-card {
    border-radius: 15px;
  }

  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
</style>
